$(function () {
    localStorage.clear();
    addxiaofangData2()
    setInterval(() => {
        addxiaofangData2()
    }, 1000 * 30);
    // $('.xiaofangSysClass').on('click', function () {

    // });
    $('.popupClose4').on('click', function () {
        $('.popupClose4').css('display', 'none');
        $('.popup4').animate({ width: '3px' }, 400, function () {
            $('.popup4').animate({ height: 0 }, 400);
        });
        setTimeout(summaryHide4, 800);
    });

    function summaryHide4() {
        clearInterval(time)
        localStorage.clear()
        $('.filterbg4').hide();
        $('.popup4').hide();
        $('.popup4').width(0);
    };
})
var time;
function summaryShow4() {
    intiDivFaguan()
    intiDivFaguan2()
    localStorage.setItem("clickIndex", 4);
    getxiaofangdangtianData();
    time = setInterval(() => {
        getxiaofangdangtianData()
    }, 1000 * 30);
    DeviceDatalistxiaofangbaojing(1)
    setInterval(() => {
        DeviceDatalistxiaofangbaojing(1)
    }, 3000);
    $('.popupClose4').css('display', 'block');

};

function intiDivFaguanCommonfun(id) {
    var chartDom = document.getElementById(id);
    var myChart = echarts.init(chartDom);
    var option;

    const gaugeData = [
        {
            value: 20,
            name: 'Perfect',
            title: {
                offsetCenter: ['0%', '-30%']
            },
            detail: {
                valueAnimation: true,
                offsetCenter: ['0%', '-20%']
            }
        },
        {
            value: 40,
            name: 'Good',
            title: {
                offsetCenter: ['0%', '0%']
            },
            detail: {
                valueAnimation: true,
                offsetCenter: ['0%', '10%']
            }
        },
        {
            value: 60,
            name: 'Commonly',
            title: {
                offsetCenter: ['0%', '30%']
            },
            detail: {
                valueAnimation: true,
                offsetCenter: ['0%', '40%']
            }
        }
    ];
    option = {
        color: ['aqua', 'blue', 'red'],
        series: [
            {
                type: 'gauge',
                startAngle: 90,
                endAngle: -270,
                pointer: {
                    show: false
                },
                progress: {
                    show: true,
                    overlap: false,
                    roundCap: true,
                    clip: false,

                    itemStyle: {
                        borderWidth: 1,
                        borderColor: '#464646'
                    }
                },

                axisLine: {
                    lineStyle: {
                        width: 15,

                    }
                },
                splitLine: {
                    show: false,
                    distance: 0,
                    length: 10
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false,
                    distance: 10
                },
                data: gaugeData,
                title: {
                    fontSize: 14,
                    show: false,
                },
                detail: {
                    width: 35,
                    height: 15,

                    fontSize: 14,
                    color: 'inherit',
                    borderColor: 'inherit',
                    borderRadius: 10,
                    borderWidth: 1,
                    formatter: '{value}%'
                }
            }
        ]
    };
    setInterval(function () {
        gaugeData[0].value = +(Math.random() * 100).toFixed(2);
        gaugeData[1].value = +(Math.random() * 100).toFixed(2);
        gaugeData[2].value = +(Math.random() * 100).toFixed(2);
        myChart.setOption({
            series: [
                {
                    data: gaugeData,
                    pointer: {
                        show: false
                    }
                }
            ]
        });
    }, 2000);

    option && myChart.setOption(option);
}

function intiDivFaguan2() {
    intiDivFaguanCommonfun("echartsxiaofangdaping1")
    intiDivFaguan3()

}
function intiDivFaguan3() {
    intiDivFaguanCommonfun("echartsxiaofangdaping2")
    intiDivFaguan4()
}
function intiDivFaguan4() {
    intiDivFaguanCommonfun("echartsxiaofangdaping3")
    intiDivFaguan5()
}
function intiDivFaguan5() {
    intiDivFaguanCommonfun("echartsxiaofangdaping4")
    intiDivFaguan6()
}
function intiDivFaguan6() {
    intiDivFaguanCommonfun("echartsxiaofangdaping5")
    intiDivFaguan7()
}
function intiDivFaguan7() {
    intiDivFaguanCommonfun("echartsxiaofangdaping6")
    intiDivFaguan8()
}
function intiDivFaguan8() {
    intiDivFaguanCommonfun("echartsxiaofangdaping7")

}


function intiDivFaguan() {
    var hhtml1 = ""
    var arr = ['1号泡沫泵控制柜', '2号泡沫泵控制柜', '3号泡沫泵控制柜', '1号冷却水泵控制柜', '2号冷却水泵控制柜', '3号冷却水泵控制柜', '自动巡检设备'];
    for (let i = 0; i < arr.length; i++) {
        var d = 10 + i * 140
        if (i == 0) {
            hhtml1 += '<div onclick="clickTogglecommvidoexiaofang(' + (i + 1) + ')"  id="dialogxiaofaId_' + (i + 1) + '" style="width: 120px;height: 280px;margin-top: 10px;position: absolute;margin-left: ' + d + 'px;text-align: center;cursor: pointer;">';
        } else {
            hhtml1 += '<div onclick="clickTogglecommvidoexiaofang(' + (i + 1) + ')" id="dialogxiaofaId_' + (i + 1) + '" style="width: 120px;height: 280px;margin-top: 10px;position: absolute;margin-left: ' + d + 'px;text-align: center;cursor: pointer;">';
        }
        hhtml1 += '<div style="position: absolute;color: #fff;margin-left: 16px;font-size: 12px;">'
        hhtml1 += ' ' + arr[i] + ' </div>'
        hhtml1 += ' <img src="./images/xiaofangbg222.png" alt="" srcset="" style="width: 120px;height: 280px;"></div>'
    }
    document.getElementById("xiaofangfaguanids").innerHTML = hhtml1
}
function xiaofangSysClass() {

    var clickIndex = localStorage.getItem("clickIndex");
    if (clickIndex == 4) {
        return
    }
    $('.popupClose' + clickIndex).css('display', 'none');
    $('.popup' + clickIndex).animate({ width: '3px' }, 400, function () {
        $('.popup' + clickIndex).animate({ height: 0 }, 400);
    });
    setTimeout(function () {
        $('.filterbg' + clickIndex).hide();
        $('.popup' + clickIndex).hide();
        $('.popup' + clickIndex).width(0);

        localStorage.setItem("clickIndex", 4);
    }, 400);

    $('.filterbg4').show();
    $('.popup4').show();
    $('.popup4').width('3px');
    $('.popup4').animate({ height: '80%' }, 400, function () {
        $('.popup4').animate({ width: '60%' }, 400);
    });
    setTimeout(summaryShow4, 800);
}
var indexP;
function DeviceDatalistxiaofangbaojing(val) {
    var datap = {
        deviceId: "",
        size: 20,
    }
    $.ajax(baseUrl + ":8091/dev-device-instance/getListDeviceAlarm", {
        method: 'GET',
        data: (datap),
        headers: {
            "content-type": "application/json",
        },
        success: function (result) {
            if (result.code == 200) {
                var list = result.data.list.records


                var html = "<div style='height:40px;color: aqua;display: flex;margin-top:20px;'>" +
                    " <div style='display: block;width:250px;margin-left:50px;'>报警时间</div><div style='display: block;width:200px;'>报警数据</div><div style='display: block;width:200px'>报警级别</div><div style='display: block;width:200px'>操作</div></div>";
                html += '<div style="border-bottom: 1px dotted aqua;background-color:aqua;width: 100%;margin-top:10px;margin-bottom:10px"></div>'
                for (let i = 0; i < list.length; i++) {
                    if ("PDJCXF" == list[i].deviceId) {

                        html += "<div style='height: 40px;display: flex;line-height:50px;')'>";

                        html += '<div style="color: aqua;">' + formatTime(list[i].alarmTime) + '</div>';
                        html += '<div style="color: aqua;margin-left:50px;">' + list[i].alarmName + '</div>';
                        html += '<div style="color: aqua;margin-left:60px;">' + fotmatDescription(list[i].description) + '</div>';
                        html += "<div style='width: 60px;background-color: rgba(0, 0, 0, 0.5);box-shadow: 15px 0px 15px 0px rgba(0, 0, 0, 0.5);" +
                            "color: #fff;font-size: 18px;cursor: pointer;margin-left:100px;' onclick='chulibaojibyid2(" + JSON.stringify(DeviceDatalist[i]) + ")'>" +
                            "处理" +
                            "</div>";
                        html += '</div>';
                        html += '<div style="border-bottom: 1px dotted aqua;background-color:aqua;width: 100%;margin-top:10px;margin-bottom:20px"></div>'

                    }
                }

                document.getElementById("meagrsbaoj1haodialog2").innerHTML = (html);

                if (val) {

                    if ("PDJCXF" == list[0].deviceId && list[0].preset) {
                        indexP = getCaption(list[0].preset, "=")
                        document.getElementById("dialogxiaofaId_" + indexP).className = "light2"
                        clickTogglecommvidoexiaofang(list[0].preset, indexP);
                    }
                }
            }
        },
        error: function (err) {
            console.log(err);
        }
    })
}

function chulibaojibyid2(val) {

    panduanbaojin2(val)
    $.ajax("http://58.33.201.244:8091/dev-device-instance/updateAlarm?ids=" + val.id, {
        method: 'get',
        data: {

        },
        headers: { 'Content-Type': "application/json" },
        success: function (r) {
            if (r.code == 200) {
                document.getElementById("dialogxiaofaId_" + indexP).className = ""
                DeviceDatalistxiaofangbaojing(1)

            }
        },
        error: function (err) {
            console.log(err);
        }
    })
}

function addxiaofangData2() {
    $.ajax(baseUrl + ":8091/dev-device-instance/getDeviceDataInfo", {
        method: 'GET',
        data: {
            id: "pdjcxf",
        },
        headers: {
            "content-type": "application/json",
        },
        success: function (result) {
            if (result.code == 200) {
                document.getElementById("xiaofangbaojiid41").innerHTML = result.data.list.records[0].Tag41 == 1 ? "有" : "无"
                document.getElementById("filterbg8dcqdidxiaofang1").innerHTML = result.data.list.records[0].Tag34 == 1 ? "开启" : "关闭"
                document.getElementById("filterbg8dcqdidxiaofang2").innerHTML = result.data.list.records[0].Tag35 == 1 ? "开启" : "关闭"

                document.getElementById("filterbg8dcqdidxiaofang3").innerHTML = result.data.list.records[0].Tag36 == 1 ? "开启" : "关闭"
                document.getElementById("filterbg8dcqdidxiaofang4").innerHTML = result.data.list.records[0].Tag37 == 1 ? "开启" : "关闭"
                document.getElementById("filterbg8dcqdidxiaofang5").innerHTML = result.data.list.records[0].Tag38 == 1 ? "开启" : "关闭"
                document.getElementById("filterbg8dcqdidxiaofang6").innerHTML = result.data.list.records[0].Tag39 == 1 ? "开启" : "关闭"
                document.getElementById("filterbg8dcqdidxiaofang7").innerHTML = result.data.list.records[0].Tag40 == 1 ? "开启" : "关闭"
                getsyslxioafamgData2(result.data.list.records)
            }
        },
        error: function (err) {
            console.log(err);
        }
    })
}

function getsyslxioafamgData2(val) {
    let data = {
        xiaofangPa: val[0]
    }
    $.ajax("http://192.168.15.10:8080/yewu/info/addTableInfo", {
        method: 'post',
        data: JSON.stringify(data),
        headers: {
            "Content-type": "application/json",
        },
        success: function (r) {
        },
        error: function (err) {
            console.log(err);
        }
    })
}

function addxiaofangData() {
    //jcxk
    $.ajax(baseUrl + ":8091/dev-device-instance/getDeviceDataInfo", {
        method: 'GET',
        data: {
            id: "jcxk",
        },
        headers: {
            "content-type": "application/json",
        },
        success: function (result) {
            if (result.code == 200) {
                // document.getElementById("shaunxintag127Id").innerHTML = result.data.list.records[0].Tag127 + "M"
                // document.getElementById("shaunxintag128Id").innerHTML = result.data.list.records[0].Tag128 + "M"

                // document.getElementById("diaxiaofangkaiguanleft1").innerHTML = "比例混合装置: " + (result.data.list.records[0].Tag120 == "1" ? "开" : "关")
                // document.getElementById("diaxiaofangkaiguanleft2").innerHTML = "灭火联动: " + (result.data.list.records[0].Tag121 == "1" ? "开" : "关")
                // document.getElementById("diaxiaofangkaiguanleft3").innerHTML = "喷淋联动: " + (result.data.list.records[0].Tag122 == "1" ? "开" : "关")
                // document.getElementById("diaxiaofangkaiguanleft4").innerHTML = "泡沫联动: " + (result.data.list.records[0].Tag123 == "1" ? "开" : "关")
                // document.getElementById("diaxiaofangkaiguanleft5").innerHTML = "稳压装置: " + (result.data.list.records[0].Tag119 == "1" ? "开" : "关")
                // getsyslxioafamgData(result.data.list.records[0])
            }
        },
        error: function (err) {
            console.log(err);
        }
    })
}

function getsyslxioafamgData(val) {
    var data = {
        tag120: val.Tag120,
        tag121: val.Tag121,
        tag122: val.Tag122,
        tag123: val.Tag123,
        tag127: val.Tag127,
        tag128: val.Tag128,
        tag129: val.Tag129,
        tag130: val.Tag130,
        tag131: val.Tag131,

    }
    $.ajax("http://192.168.15.10:8080/system/xiaofang/add", {
        method: 'post',
        data: JSON.stringify(data),
        headers: {
            "content-type": "application/json",
        },
        success: function (result) {


        },
        error: function (err) {
            console.log(err);
        }
    })
}


var timeArr = []
var Tag42Arr = []
var Tag43Arr = []
var Tag44Arr = []
var Tag45Arr = []
var Tag46Arr = []
function getxiaofangdangtianData() {
    $.ajax("http://192.168.15.10:8080/yewu/info/getCurrentDataInfo", {
        method: 'get',
        data: {},
        headers: {
            "content-type": "application/json",
        },
        success: function (r) {
            var id = [];
            timeArr = [];

            Tag42Arr = []
            Tag43Arr = []
            Tag44Arr = []
            Tag45Arr = []
            Tag46Arr = []
            if (r.code == 200) {
                for (let i = 0; i < r.data.length; i++) {

                    //判断在id这个数组中有没有找到id
                    if (id.indexOf(getNowFormatDate(r.data[i].create_time)) == -1) {
                        //把id用push存进id这个数组中
                        id.push(getNowFormatDate(r.data[i].create_time));
                        timeArr.push(getNowFormatDate(r.data[i].create_time))
                        Tag42Arr.push(r.data[i].Tag42)
                        Tag43Arr.push(r.data[i].Tag43)
                        Tag44Arr.push(r.data[i].Tag44)
                        Tag45Arr.push(r.data[i].Tag45)
                        Tag46Arr.push(r.data[i].Tag46)

                    }
                }
                xiaofangSysdiaCharts()

            }

        },
        error: function (err) {
            console.log(err);
        }
    })
}
//xiaofangSysdiaId1
function xiaofangSysdiaCharts() {

    var chartDom = document.getElementById('xiaofangSysdiaId5');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        color: ['aqua', 'red'],
        legend: {
            data: ['1#消防水罐液位', '2#消防水罐液位'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {},
        xAxis: {
            type: 'category',
            // boundaryGap: false,
            data: timeArr,


            axisLabel: {
                show: true,//是否显示轴线
                textStyle: {
                    color: '#fff' // 设置x轴字体颜色为红色
                },
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }

            },
        },
        yAxis: {
            name: "M", //y轴上方的单位
            type: 'value',
            axisLine: {
                show: true,//是否显示轴线
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }
            },
        },
        series: [
            {
                name: '1#消防水罐液位',
                type: 'line',
                smooth: true,
                data: Tag42Arr
            },
            {
                name: '2#消防水罐液位',
                type: 'line',
                smooth: true,
                data: Tag43Arr
            },
        ]
    };

    option && myChart.setOption(option);
    xiaofangSysdiaCharts2()
}
function getCaption(url, parameter) {
    //var url = window.location.href;
    var index = url.lastIndexOf(parameter);
    url = url.substring(index + 1, url.length);
    return url;
}


//xiaofangSysdiaId2
function xiaofangSysdiaCharts2() {
    var chartDom = document.getElementById('xiaofangSysdiaId6');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        color: ['red', '#fff'],
        legend: {
            data: ['事故池液位', '隔油池液位'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {},
        xAxis: {
            type: 'category',
            // boundaryGap: false,
            data: timeArr,


            axisLabel: {
                show: true,//是否显示轴线
                textStyle: {
                    color: '#fff' // 设置x轴字体颜色为红色
                },
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }

            },
        },
        yAxis: {
            name: "M", //y轴上方的单位
            type: 'value',
            axisLine: {
                show: true,//是否显示轴线
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }
            },
        },
        series: [
            {
                name: '事故池液位',
                type: 'line',
                smooth: true,
                data: Tag44Arr
            },
            {
                name: '隔油池液位',
                type: 'line',
                smooth: true,
                data: Tag45Arr
            },
        ]
    };

    option && myChart.setOption(option);
    xiaofangSysdiaCharts3()
}


function xiaofangSysdiaCharts3() {
    var chartDom = document.getElementById('xiaofangSysdiaId7');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        color: ['aqua'],
        legend: {
            data: ['消防水管总压力'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {},
        xAxis: {
            type: 'category',
            // boundaryGap: false,
            data: timeArr,


            axisLabel: {
                show: true,//是否显示轴线
                textStyle: {
                    color: '#fff' // 设置x轴字体颜色为红色
                },
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }

            },
        },
        yAxis: {
            name: "Mpa", //y轴上方的单位
            type: 'value',
            axisLine: {
                show: true,//是否显示轴线
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }
            },
        },
        series: [
            {
                name: '消防水管总压力',
                type: 'line',
                smooth: true,
                data: Tag46Arr
            },
        ]
    };

    option && myChart.setOption(option);
    // xiaofangSysdiaCharts4()
}


function xiaofangSysdiaCharts4() {
    var chartDom = document.getElementById('xiaofangSysdiaId4');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        color: ['aqua'],
        legend: {
            data: ['隔油池液位'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {},
        xAxis: {
            type: 'category',
            // boundaryGap: false,
            data: timeArr,


            axisLabel: {
                show: true,//是否显示轴线
                textStyle: {
                    color: '#fff' // 设置x轴字体颜色为红色
                },
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }

            },
        },
        yAxis: {
            name: "M", //y轴上方的单位
            type: 'value',
            axisLine: {
                show: true,//是否显示轴线
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }
            },
        },
        series: [
            {
                name: '隔油池液位',
                type: 'line',
                // stack: 'Total',
                data: tag130Arr
            },
        ]
    };

    option && myChart.setOption(option);
    xiaofangSysdiaCharts5()
}


function xiaofangSysdiaCharts5() {
    var chartDom = document.getElementById('xiaofangSysdiaId5');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        color: ['aqua'],
        legend: {
            data: ['消防水管总压力'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {},
        xAxis: {
            type: 'category',
            // boundaryGap: false,
            data: timeArr,


            axisLabel: {
                show: true,//是否显示轴线
                textStyle: {
                    color: '#fff' // 设置x轴字体颜色为红色
                },
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }

            },
        },
        yAxis: {
            name: "Mpa", //y轴上方的单位
            type: 'value',
            axisLine: {
                show: true,//是否显示轴线
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }
            },
        },
        series: [
            {
                name: '消防水管总压力',
                type: 'line',
                // stack: 'Total',
                data: tag131Arr
            },
        ]
    };

    option && myChart.setOption(option);
}

function clickTogglecommvidoexiaofang(url,val) {
    $.ajax(url, {
        method: 'get',
        data: {},
        headers: {
            "content-type": "application/json",
        },
        success: function (r) {


        },
        error: function (err) {
            console.log(err);
        }
    })
}
